<template>
  <div>
    <h2>文章总数:{{ this.tableData.length }}</h2>
    <div class="articalList">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="发布日期" width="150">
        </el-table-column>
        <el-table-column prop="t" label="文章标题" width="300">
        </el-table-column>

        <el-table-column prop="_id" label="文章ID"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row._id + 'WOWO')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="del(scope.row._id + 'WOWO')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  methods: {
    handleClick(id) {
      this.$router.push("/home/artical/" + id)
    },
    del(id) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let artID = id.split("WOWO")[0];
          this.$request({
            url: "/artical/delete",
            method: "post",
            data: qs.stringify({
              id: artID,
            }),
          }).then((success) => {
            this.tableData = success.data;
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.$request({
      url: "/artical/all",
      method: "get",
    }).then((success) => {
      this.tableData = success.data;
    });
  },
};
</script>

<style scoped>
ul li {
  display: flex;
  padding: 10px;
  overflow: hidden;
  height: 140px;
  margin: 20px 0;
  background-color: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  line-height: 1.4;
}
.img img {
  width: 120px;
  height: 120px;
}
.info {
  margin-left: 20px;
}
</style>